<template>
  <div id="app" class="container">
    <div class="header">芒果商城</div>
    <router-view class="content"></router-view>
    <ul class="footer">
      <li class="active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </li>
      <li>
        <i class="fa fa-fire"></i>
        <span>热卖</span>
      </li>
      <li>
        <i class="fa fa-shopping-cart"></i>
        <span>购物车</span>
      </li>
      <li>
        <i class="fa fa-user"></i>
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body,
  .container {
    width: 100%;
    height: 100%;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .container .header {
    height: 40px;
    text-align: center;
    background: cyan;
    line-height: 40px;
    color: white;
    font-weight: 900;
  }
  .container .content {
    flex: 1;
    overflow: auto;
  }
  .container .footer {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: cyan;
    color: white;
  }
  ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  ul li i {
    font-size: 1.6rem;
  }
  ul li span {
    font-size: 0.6rem;
  }
  ul li.active {
    color: black;
    font-weight: 900;
  }
  img {
    max-width: 100%;
  }
</style>
